<template>
	<view class="content">
	
				
		<view class="input-group">
			<view class="info">
				<view class="box">
					<view class="title">
						手机号码
					</view>
					<input class="m-text" type="text" v-model="account" placeholder="请输入手机号码">
				</view>
				<view class="box">
					<view class="title">
						验证码
					</view>
					<input class="m-pass" type="text" v-model="verifycode" placeholder="请输入验证码" :maxlength="length">
					<view class="m-code" @click="code" v-if="countdown>61">获取验证码</view>
					<view class="m-code" @click="code" v-if="countdown==61">重新获取</view>
					<view class="m-code" v-if="countdown<61">{{countdown}} 秒</view>
				</view>
			</view>

			<view style="height: 30upx;"></view>
			
			<view class="input-btn" style="margin-bottom: 35px;" @click="register()">绑定</view>
			
			<view style="height: 30upx;"></view>
			
		</view>
		
		
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		components: {
		},
		data() {
			return {
				logo:'',
				invite_code:'',
				account:'',
				verifycode:'',
				password:'',
				countdown:62,
				checked:false,
				status:1,
				length:4,
			}
		},
		onLoad(opt) {
		},
		onShow:function(){

		},
		methods: {
			code(){
				var self = this;
				//手机号码位数验证
				if(self.account.length != 11){
					uni.showToast({
						icon: 'none',
						title: '请输入11位的手机号码'
					});
					return;
				}
				//手机号码正则验证
				if(!(/^1[3-9][0-9]\d{8,11}$/.test(self.account))){
					uni.showToast({
						icon: 'none',
						title: '手机号码格式不正确'
					});
					return;
				}
				
				$H.post('/sms/sendCode', {
					'mobile': self.account,
					'scenes': 'BDSJHM'
				}, {
					token: false
				}).then(res => {
					if (res.code == 1) {
						this.$u.toast('验证码已发送');
						self.codetime(self,60);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
				
			},
			//手机验证码获取倒计时
			codetime: function(obj,num) {
				if(num<10){
					obj.countdown = "0" + num;
				}else{
					obj.countdown = num;
				}
				num--;
				if(num < 0){
					obj.countdown = 61;
				}else{
					setTimeout(function(){
						obj.codetime(obj,num);
					}, 1000);
				}
			},
			register() {
				var self = this;
				//手机号码位数验证
				if(self.account.length != 11){
					uni.showToast({
						icon: 'none',
						title: '请输入11位的手机号码'
					});
					return;
				}
				
				//手机号码正则验证
				if(!(/^1[3-9][0-9]\d{8,11}$/.test(self.account))){
					uni.showToast({
						icon: 'none',
						title: '手机号码格式不正确'
					});
					return;
				}
				
				if(self.verifycode == ''){
					uni.showToast({
						icon: 'none',
						title: '手机验证码不能为空'
					});
					return;
				}
				
				if(self.verifycode.length != self.length){
					uni.showToast({
						icon: 'none',
						title: '请输入'+self.length+'位的手机验证码'
					});
					return;
				}
				
				self.status = 0;
				
				$H.post('user/bindMobile', {
					'mobile': self.account,
					'code': self.verifycode,
					'type': 'bind',
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						uni.navigateBack();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})

			}
		}
	}
</script>

<style>
	
	/* page{
		background-color: #FFFFFF;
	} */
	
	.input-group{
		background-color: #fff;
		margin: 15px;
		border-radius: 15px;
		margin-top: 50px;
	}
	
	.content{
		height: 100%;
		width: 100%;
	}
	
	.topbox{
		background: url(../../static/regbackg@2x.png) no-repeat;
		background-size:100% 200px;
		height: 200px;
		width: 100%;
		display: flex;
	}
	

	.memory{
		width: 80%;
		margin: 0 auto;
		color: #8F8F94;
		font-size: 28upx;
/* 		text-align: center; */
		/* text-indent: 10upx; */
	}
	.memory text{
		color: #6E8CFA;
	}
	
	.info {
		padding: 30px;
		padding-top: 0;
	}
	
	.input-btn{
		width: 90%;
		background: linear-gradient(15deg, #52AFF3 0%, #0986E3 100%);
		box-shadow: 0px 10px 21px 6px rgba(9, 134, 227, 0.28);
		color: #eee;
		margin: 0 auto;
		border-radius: 20px;
		height: 44px;
		font-size: 16px;
		line-height: 44px;
		text-align: center;
		font-weight: 700;
		margin-top: 20px;
	}
	
	.info .box {
		color: #999;
		border-bottom: 1px solid #f3f3f3;
		padding: 13px 0;
		position: relative;
	}
	
	.info .box .title {
		font-size: 14px;
		color: #999;
	}
	.info .box .m-code{
	    position: absolute;
	        right: 10px;
	        top: 50%;
	        -webkit-transform: translateY(-70%);
	        transform: translateY(-70%);
	        font-size: 13px;
	        height: 30px;
	        line-height: 30px;
	        color: #ffffff;
	        background: #0986E3;
	        margin: 5px;
	        border-radius: 5px;
	        width: 70px;
	        text-align: center;
			padding: 0px 5px 0px 5px;
	}
	.info .box .m-code .tips{
	    background: #0986E3;
	    color: #fff;
	    width: 100px;
	    height: 30px;
	    border-radius: 15px;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
		padding: 0px 5px 0px 5px;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    -webkit-box-pack: center;
	    -webkit-justify-content: center;
	    justify-content: center;
	}
	.action-row{
		width: 80%;
		margin: 20px auto;
		text-align: center;
		color: #666;
	}
	.info1 {
	  width: 190px;
	  overflow-wrap: break-word;
	  color: rgba(53, 53, 53, 1);
	  font-size: 28px;
	  font-family: PingFangSC-Medium;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 28px;
	  margin: 0 auto;
	  margin-top:85px;
	}

</style>
